<template>
  <div class="app-container">
    <div class="mark">
      <span style="font-size:20px;font-weight:bold;margin-left:10px" class="mark">项目统计</span>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
      :data="list"
      fit
      style="width: 95%; height: 100%; margin: 40px 30px"
    >
      <el-table-column label="序号" width="70px" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.projectname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检查点数量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.checknum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首测bug数量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.fristnum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="漏测bug数量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.leaknum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新出现bug数量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.newnum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="bug总数" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.bugcount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="bug密度" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.bugdensity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首轮漏测率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.fristleak }}</span>
        </template>
      </el-table-column>
      <el-table-column label="引入错误率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.bringerror }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.addtime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_num"
      :limit.sync="listQuery.page_per"
      @pagination="tableQueryData"
    />
  </div>
</template>
<script>
import { staticData } from '../../api/project-statistics'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  components: {
    Pagination
  },
  data() {
    return {
      listLoading: true,
      listQuery: {
        page_num: 1,
        page_per: 20
      },
      list: null,
      total: 0,
      tableKey: 0
    }
  },
  mounted() {
    this.tableQueryData()
  },
  methods: {
    tableQueryData() {
      staticData(this.listQuery).then((res) => {
        this.list = res.data.items
        this.total = res.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    }
  }
}
</script>

<style scoped>
.projectStatistics {
  width: 95%;
  height: 100%;
  margin: 40px 30px;
  position: relative;
  background-color: #ffffff;
}
.mark {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: #1890ff ;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.title {
  font-size: 22px;
  border-bottom: 0.5px solid black;

}
</style>
